---
title   : Home
layout  : moment-timezone-base.hbs
order   : 0
scripts :
  - timezone-home
---

<header class="hero hero-moment-timezone">
	<div class="centered">
		<div class="hero-circle">
			<div class="hero-world"></div>
		</div>
		<div class="hero-title">
			<h1>Moment Timezone <span>{{ size.moment_timezone_version }}-{{size.moment_timezone_data_version}}</span></h1>
			<h2>Parse and display dates in any timezone.</h2>
		</div>
	</div>
</header>

<div class="builds">
	<div class="builds-download">
		<h3>Download</h3>
		
		<a class="builds-button builds-button-source" href="/downloads/moment-timezone-with-data-10-year-range.js">
			moment-timezone-with-data-10-year-range.js
		</a>
		<a class="builds-button builds-button-gzipped" href="/downloads/moment-timezone-with-data-10-year-range.min.js">
			moment-timezone-with-data-10-year-range.min.js
			<span class="filesize">{{toKb size.moment_timezone_with_data_10_year_range_min.gzip }}</span>
		</a>

		<a class="builds-button builds-button-source" href="/downloads/moment-timezone-with-data-1970-2030.js">
			moment-timezone-with-data-1970-2030.js
		</a>
		<a class="builds-button builds-button-gzipped" href="/downloads/moment-timezone-with-data-1970-2030.min.js">
			moment-timezone-with-data-1970-2030.min.js
			<span class="filesize">{{toKb size.moment_timezone_with_data_1970_2030_min.gzip }}</span>
		</a>

		<a class="builds-button builds-button-source" href="/downloads/moment-timezone-with-data.js">
			moment-timezone-with-data.js
		</a>
		<a class="builds-button builds-button-gzipped" href="/downloads/moment-timezone-with-data.min.js">
			moment-timezone-with-data.min.js
			<span class="filesize">{{toKb size.moment_timezone_with_data_min.gzip }}</span>
		</a>

		<a class="builds-button builds-button-source" href="/downloads/moment-timezone.js">
			moment-timezone.js (no data)
		</a>
		<a class="builds-button builds-button-gzipped" href="/downloads/moment-timezone.min.js">
			moment-timezone.min.js
			<span class="filesize">{{toKb size.moment_timezone_min.gzip }}</span>
		</a>
	</div>
	<div class="builds-packages">
		<h3>Install</h3>
		<pre><code>bower install moment-timezone --save <span class="comment"># bower</span>
npm install moment-timezone --save   <span class="comment"># npm</span>
yarn add moment-timezone             <span class="comment"># Yarn</span>
	</div>
</div>

<div class="map">
	<h3 class="map-label">
		<span class="map-label-name"></span>
		<span class="map-label-time"></span>
	</h3>
	<div class="map-wrap">
		<div class="map-inset">
			<div class="map-axis-x"></div>
			<div class="map-axis-y"></div>
		</div>
	</div>

{{#markdown}}
### Format Dates in Any Timezone

```js
var jun = moment("2014-06-01T12:00:00Z");
var dec = moment("2014-12-01T12:00:00Z");

jun.tz('America/Los_Angeles').format('ha z');  // 5am PDT
dec.tz('America/Los_Angeles').format('ha z');  // 4am PST

jun.tz('America/New_York').format('ha z');     // 8am EDT
dec.tz('America/New_York').format('ha z');     // 7am EST

jun.tz('Asia/Tokyo').format('ha z');           // 9pm JST
dec.tz('Asia/Tokyo').format('ha z');           // 9pm JST

jun.tz('Australia/Sydney').format('ha z');     // 10pm EST
dec.tz('Australia/Sydney').format('ha z');     // 11pm EST
```

### Convert Dates Between Timezones

```js
var newYork    = moment.tz("2014-06-01 12:00", "America/New_York");
var losAngeles = newYork.clone().tz("America/Los_Angeles");
var london     = newYork.clone().tz("Europe/London");

newYork.format();    // 2014-06-01T12:00:00-04:00
losAngeles.format(); // 2014-06-01T09:00:00-07:00
london.format();     // 2014-06-01T17:00:00+01:00
```

{{/markdown}}

</div>

